<template>
  <div class='my-project-container'>
    <div class="filter-view">
      <el-form ref="form" label-width="100px">
        <el-form-item label="更新时间">
          <el-date-picker
            v-model="queryParams.beginDateTime"
            style="width: 20%;"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择开始时间"
          />
          至
          <el-date-picker
            v-model="queryParams.endDateTime"
            style="width: 20%;"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="'23:59:59'"
            placeholder="选择结束时间"
          />
          <el-input
            v-model="queryParams.projectName"
            style="width: 20%; margin-left: 20px;" type="text" placeholder="请输入项目名称"
          />
          <el-button style="margin-left: 20px;" type="primary" @click='queryProjectPage'>查询</el-button>
        </el-form-item>

      </el-form>
    </div>
    <div class="project-grid-container">
<!--      <div style='width:100%;height: 100%; position: relative'>-->
<!--        <div style='position: absolute;width: 100%; color: #ffffff; z-index: 100; text-align:center; bottom:10px '>-->
<!--          <span>{{ category.categoryName }}</span>-->
<!--        </div>-->
<!--        <el-image-->
<!--          style='position: absolute; top: 0; left: 0; width: 100%; height: 100%;'-->
<!--          :src="imageSrc"-->
<!--          fit='cover'>-->
<!--        </el-image>-->
<!--      </div>-->
      <div
        v-if="projectList.length"
        v-loading="projectListLoading"
        class="project-grid-view"
      >
        <div v-for="p in projectList" :key="p.id" class="project-grid-item-view pointer">
          <el-row type="flex" align="middle" justify="center">
            <el-col :span="5">
              <span
                class="project-grid-view-status"
              />
            </el-col>
            <el-col :span="19">
              <el-tooltip :content="p.projectName" placement="top">
                <p class="project-title">
                  {{ p.projectName }}
                </p>
              </el-tooltip>
            </el-col>
          </el-row>
          <img class="project-grid-view-preimg"
               src="https://freebrio.oss-cn-shanghai.aliyuncs.com/t/pic%20(1).png"
          >
          <p class="project-grid-view-time">创建时间：{{ p.createTime | formatDate }}</p>
<!--          <div class="gird-operating-btns">-->
<!--            <el-button size='mini' @click='previewHandle(p.projectKey, p)' >预览</el-button>-->
<!--            <el-button size='mini' @click='catalogueHandle(p.projectKey, p.id)'>使用</el-button>-->
<!--          </div>-->
          <div class="gird-operating-btns">
            <el-button type="text"   @click="toProjectHandle(p.projectKey,5)">
              <i class="el-icon-edit" />
              编辑
            </el-button>
            <span>
              <el-button
                v-if="p.status!=1" type="text"
              >
                <i class="el-icon-data-analysis" />
                统计
              </el-button>
            </span>
            <el-popconfirm
              v-if="p.status==2"
              title="确定停止收集该项目吗？"
              @confirm='stopProject(p.projectKey)'
            >
              <el-button slot="reference"
                         class="pink-text-btn"
                         type="text"
              >
                <i class="el-icon-video-pause" />
                停止
              </el-button>
            </el-popconfirm>
            <el-popconfirm
              v-if="p.status==3"
              title="确定删除该项目吗？"
              @confirm="deleteProject(p.projectKey)"
            >
              <el-button slot="reference"
                         class="pink-text-btn"
                         type="text"
              >
                <i class="el-icon-delete" />
                删除
              </el-button>
            </el-popconfirm>
          </div>
        </div>
      </div>
      <div v-else v-loading="projectListLoading">
        数据为空
      </div>
    </div>
    <div class="project-page-view">
      <el-pagination
        v-if="total>10"
        background
        :page-size.sync="queryParams.size"
        :current-page.sync="queryParams.pageNum"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="queryProjectPage"
      />
    </div>
    <preview-dialog :preview-visible.sync='previewVisible' :projectKey = 'projectKey'></preview-dialog>
    <catalogue-dialog :catalogue-visible.sync='catalogueVisible' :project-key= 'projectKey'></catalogue-dialog>
  </div>
</template>

<script>
import 'font-awesome/css/font-awesome.css'
import dayjs from 'dayjs'
import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate } from "@/api/evaluation/template";
import previewDialog from  "@/views/template/categoryDialog/PreviewDialog"
import CatalogueDialog from '@/views/template/categoryDialog/CatalogueDialog'

const projectStatusList = [
  { code: 1, name: '未发布', color: '#006EFF' },
  { code: 2, name: '收集中', color: '#34C82A' },
  { code: 3, name: '已结束', color: '#955A45' }
]

export default {
  name: 'courseProject',
  components: {
    previewDialog,
    CatalogueDialog
  },
  filters: {
    formatDate(time) {
      return  dayjs(time).format('YYYY/MM/DD')
    }
  },
  data() {
    return {
      dataShowType: 'grid',
      projectStatusList: projectStatusList,
      total: 0,
      projectList: [
      ],
      projectListLoading: true,
      queryParams: {
        pageNum: 1,
        size: 10,
        isDelete: false,
        projectName: '',
        beginDateTime: null,
        endDateTime: null,
        status: null,
        courseId: this.$route.query.courseId,
        categoryId: this.$route.query.categoryId,
      },
      catalogueVisible: false,
      previewVisible: false
    }
  },
  created () {
    this.queryProjectPage()
  },
  methods: {
    switchDataShowTypeHandle(type) {
      this.dataShowType = type
    },

    queryProjectPage() {
      console.log('categoryId',this.queryParams.categoryId)
      if (this.queryParams.categoryId==undefined){
        this.$http.post('project/page',
          this.queryParams
        ).then(res => {
          console.log('project',this.queryParams)
          const {list, total, size} = res.data.data
          this.projectList = list
          this.total = total
          this.queryParams.size = 10
          this.projectListLoading = false
        })
      }else {
        listTemplate(this.queryParams).then(response => {
          console.log('template',this.queryParams)
          this.projectList = response.rows;;
          this.total = response.total;
          this.projectListLoading = false
        });
      }
    },
    toProjectHandle (projectKey, type) {
      this.$router.push({ path: '/edit', query: { projectKey: projectKey, active: type } })
      console.log(key)
    },
    stopProject (key) {
      console.log(key)
      this.$http.post('/project/stop',{ projectKey: key }).then(res => {
        console.log(res)
        this.$message.success('问卷停止收集成功，可以重新发布哦~')
        this.queryProjectPage()
      })
    },
    deleteProject (key) {
      console.log(key)
      this.$http.post('/project/delete',{ projectKey: key }).then(res => {
        console.log(res)
        this.$message.success('问卷删除成功，可以去回收站回收哦~')
        this.queryProjectPage()
      })
    },
    previewHandle (projectKey, p) {
      console.log(p)
      this.previewVisible = true
      this.projectKey = projectKey
    },
    catalogueHandle (projectKey, id) {
      this.catalogueVisible = true
      this.projectKey = projectKey
      this.categoryId = id
      console.log('id', id)
    },
  },
  computed: {
    getStatusColorStyle() {
      return function(code) {
        const color = projectStatusList.find(item => item.code == code).color
        return {
          backgroundColor: color,
          borderColor: color
        }
      }
    }
  }
}
</script>

<style scoped>
.my-project-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  align-content: center;
}

.filter-view {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
}
.show-view-type-icon {
  color: white;
  font-size: 18px;
  -webkit-text-stroke: 0.5px #a8a8a8;
  margin: 5px;
  cursor: pointer;
}
.show-view-type-icon-active {
  color: rgba(92, 155, 249, 100);
  -webkit-text-stroke: 0.5px rgba(92, 155, 249, 100);
}


.project-grid-container {
  margin-top: 20px;
  display: flex;
  flex: 1;
  overflow: auto;
  width: 100%;
  justify-content: center;
}
.project-grid-view {
  display: flex;
  width: 950px;
  flex-direction: row;
  flex-wrap: wrap;
}

.project-grid-item-view {
  width: 169px;
  height: 199px;
  line-height: 20px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 100);
  text-align: center;
  box-shadow: 0 3px 6px 3px rgba(0, 0, 0, 0.12);
  margin: 10px;
  position: relative;
}
.project-title {
  margin: 14px 0px;
  color: rgba(16, 16, 16, 100);
  font-size: 13px;
  text-align: left;
  line-height: 20px;
  max-height: 20px;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-grid-view-status {
  display: inline-block;
  width: 7px;
  height: 7px;
  line-height: 20px;
  background-color: rgba(0, 110, 255, 100);
  text-align: center;
  border: 1px solid rgba(0, 110, 255, 100);
  border-radius: 20px;
}


.gird-operating-btns {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
  bottom: 0;
  display: none;
  border: none;
}
.project-grid-item-view:hover .gird-operating-btns {
  display: block;
}
.project-grid-view-preimg {
  width: 143px;
  height: 121px;
}
.project-grid-view-time {
  color: rgba(144, 147, 153, 100);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  margin: 0;
}
</style>
